<!-- 
 * @Description: 会话统计卡片
 * @Author: huguodong 
 * @Date: 2023-12-15 15:45:10
!-->
<template>
  <el-row :gutter="10" class="mb-2">
    <el-col :span="6">
      <el-card shadow="hover">
        <div class="stat-card">
          <div class="stat-icon online">
            <el-icon :size="40"><UserFilled /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.onLineCount }}</div>
            <div class="stat-label">在线用户数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <div class="stat-card">
          <div class="stat-icon today">
            <el-icon :size="40"><TrendCharts /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.currentSessionTotalCount }}</div>
            <div class="stat-label">当前会话总数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <div class="stat-card">
          <div class="stat-icon chart">
            <el-icon :size="40"><DataLine /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.maxTokenCount }}</div>
            <div class="stat-label">最大令牌数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <div class="stat-card">
          <div class="stat-icon ratio">
            <el-icon :size="40"><PieChart /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.proportionOfBAndC }}</div>
            <div class="stat-label">BC端比例</div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="statsCard">
import { UserFilled, TrendCharts, DataLine, PieChart } from "@element-plus/icons-vue";
import { Session, sessionApi } from "@/api";

// 统计数据
const stats = ref<Session.SessionStats>({
  onLineCount: 0,
  currentSessionTotalCount: 0,
  maxTokenCount: 0,
  proportionOfBAndC: "0/0"
});

// 获取统计数据
async function getStats() {
  try {
    const res = await sessionApi.analysis();
    stats.value = res.data;
  } catch (error) {
    console.error("获取统计数据失败", error);
  }
}

// 页面加载时获取数据
onMounted(() => {
  getStats();
  // 每30秒刷新一次统计数据
  setInterval(() => {
    getStats();
  }, 30000);
});

// 暴露刷新方法
defineExpose({ getStats });
</script>

<style scoped lang="scss">
.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;

  .stat-icon {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;

    &.online {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    &.today {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    &.chart {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    &.ratio {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
  }

  .stat-info {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
      margin-top: 5px;
    }
  }
}

:deep(.el-card__body) {
  padding: 15px;
}
</style>
